<template>
  <el-dialog v-el-drag-dialog title="配送服务费设置" :visible.sync="visible" width="800px" @closed="reset">
    <el-descriptions size="medium" border>
      <el-descriptions-item label="编码">{{ temp.goodsCode }}</el-descriptions-item>
      <el-descriptions-item label="名称">{{ temp.goodsName }}</el-descriptions-item>
      <el-descriptions-item label="类别">{{ temp.gtName }}</el-descriptions-item>
    </el-descriptions>
    <table class="pure-table">
      <thead>
        <tr>
          <th />
          <th>基准值</th>
          <th>居民</th>
          <th>商业</th>
          <th>工业</th>
        </tr>
      </thead>

      <tbody>
        <tr>
          <td style="width: 5rem;">配送费</td>
          <th>
            <el-input-number v-model="formData.spFee0" :controls="false" :min="0" :max="10000" :precision="2" @blur="inputFormat" />
          </th>
          <th>
            <el-input-number v-model="formData.spFee1" :controls="false" :min="0" :max="10000" :precision="2" @blur="inputFormat" />
          </th>
          <th>
            <el-input-number v-model="formData.spFee2" :controls="false" :min="0" :max="10000" :precision="2" @blur="inputFormat" />
          </th>
          <th>
            <el-input-number v-model="formData.spFee3" :controls="false" :min="0" :max="10000" :precision="2" @blur="inputFormat" />
          </th>
        </tr>
        <tr>
          <td>服务费</td>
          <th>
            <el-input-number v-model="formData.tpFee0" :controls="false" :min="0" :max="10000" :precision="2" @blur="inputFormat" />
          </th>
          <th>
            <el-input-number v-model="formData.tpFee1" :controls="false" :min="0" :max="10000" :precision="2" @blur="inputFormat" />
          </th>
          <th>
            <el-input-number v-model="formData.tpFee2" :controls="false" :min="0" :max="10000" :precision="2" @blur="inputFormat" />
          </th>
          <th>
            <el-input-number v-model="formData.tpFee3" :controls="false" :min="0" :max="10000" :precision="2" @blur="inputFormat" />
          </th>
        </tr>
      </tbody>
    </table>
    <div slot="footer" class="dialog-footer">
      <el-button @click="visible = false">
        关闭
      </el-button>
      <el-button :loading="$loadingPlugin.success" type="primary" @click="success">
        保存
      </el-button>
    </div>
  </el-dialog>
</template>

<script>
  import { queryDistributionData, goodsDistributionServiceSave } from '@/api'
  export default {
    name: 'distributionDialog',
    data() {
      return {
        visible: false,
        org: null,
        temp: {},
        priceInfo: null,
        formData: {
          spFee0: undefined,
          spFee1: undefined,
          spFee2: undefined,
          spFee3: undefined,
          tpFee0: undefined,
          tpFee1: undefined,
          tpFee2: undefined,
          tpFee3: undefined
        }
      }
    },

    methods: {
      open(temp, org) {
        this.org = org
        this.getDefaultData(temp, org)
        return new Promise(resolve => {
          this.resolve = resolve
          this.visible = true
          if (temp) {
            this.temp = Object.assign(this.temp, temp)
            this.type = 'edit'
          }
        })
      },
      async getDefaultData(temp, org) {
        const res = await queryDistributionData({
          goodsId: temp.goodsId,
          orgId: org.orgId
        })
        this.priceInfo = JSON.parse(res.data.priceInfo)
        if (this.priceInfo.spFee0 & 0x01 > 0) this.$set(this.formData, 'spFee0', (this.priceInfo.spFee0 >> 1) * 0.01)
        if (this.priceInfo.spFee1 & 0x01 > 0) this.$set(this.formData, 'spFee1', (this.priceInfo.spFee1 >> 1) * 0.01)
        if (this.priceInfo.spFee2 & 0x01 > 0) this.$set(this.formData, 'spFee2', (this.priceInfo.spFee2 >> 1) * 0.01)
        if (this.priceInfo.spFee3 & 0x01 > 0) this.$set(this.formData, 'spFee3', (this.priceInfo.spFee3 >> 1) * 0.01)
        if (this.priceInfo.tpFee0 & 0x01 > 0) this.$set(this.formData, 'tpFee0', (this.priceInfo.tpFee0 >> 1) * 0.01)
        if (this.priceInfo.tpFee1 & 0x01 > 0) this.$set(this.formData, 'tpFee1', (this.priceInfo.tpFee1 >> 1) * 0.01)
        if (this.priceInfo.tpFee2 & 0x01 > 0) this.$set(this.formData, 'tpFee2', (this.priceInfo.tpFee2 >> 1) * 0.01)
        if (this.priceInfo.tpFee3 & 0x01 > 0) this.$set(this.formData, 'tpFee3', (this.priceInfo.tpFee3 >> 1) * 0.01)
      },
      async success() {
        const formData = JSON.parse(JSON.stringify(this.formData))
        if (!formData.spFee0 && formData.spFee0 !== 0) {
          this.$message.error('请输入配送费基准价')
          return
        }
        if (!formData.tpFee0 && formData.tpFee0 !== 0) {
          this.$message.error('请输入服务费基准价')
          return
        }
        formData.spFee0 = this.amountHandle(formData.spFee0)
        formData.spFee1 = this.amountHandle(formData.spFee1)
        formData.spFee2 = this.amountHandle(formData.spFee2)
        formData.spFee3 = this.amountHandle(formData.spFee3)
        formData.tpFee0 = this.amountHandle(formData.tpFee0)
        formData.tpFee1 = this.amountHandle(formData.tpFee1)
        formData.tpFee2 = this.amountHandle(formData.tpFee2)
        formData.tpFee3 = this.amountHandle(formData.tpFee3)
        const json = { ...formData }
        json.goodsId = this.temp.goodsId
        json.orgId = this.org.orgId
        await goodsDistributionServiceSave(json)
        this.resolve()
        this.visible = false
        this.$notify({
          title: '提示',
          message: '操作成功',
          type: 'success',
          duration: 2000
        })
      },
      amountHandle(e) {
        if (e === '' || e === undefined) {
          return 0
        } else {
          e = e * 100
          return (e << 1) | 1
        }
      },
      inputFormat(e) {
        if (e.target.value) e.target.value = Number(e.target.value).toFixed(2)
      },
      reset() {
        this.type = 'add'
        this.formData = {
          spFee0: undefined,
          spFee1: undefined,
          spFee2: undefined,
          spFee3: undefined,
          tpFee0: undefined,
          tpFee1: undefined,
          tpFee2: undefined,
          tpFee3: undefined
        }
      }
    }
  }
</script>

<style lang="scss" scoped>
table {
  width: 100%;
  margin-top: 10px;
  border-collapse: collapse;
  border-spacing: 0;
}

td,
th {
  padding: 0;
}

.pure-table {
  border: 1px solid #cbcbcb;
  border-collapse: collapse;
  border-spacing: 0;
  empty-cells: show;
}

.pure-table caption {
  padding: 1em 0;
  color: #000;
  text-align: center;
}

.pure-table td,
.pure-table th {
  padding: 0.5em 1em;
  margin: 0;
  overflow: visible;
  line-height: 2rem;
  text-align: center;
  border-left: 1px solid #cbcbcb;
  border-width: 0 0 0 1px;
}

.pure-table thead {
  color: #000;
  text-align: left;
  vertical-align: bottom;
  background-color: #e0e0e0;
}

.pure-table td {
  background-color: transparent;
}

.pure-table-bordered td {
  border-bottom: 1px solid #cbcbcb;
}

.pure-table-bordered tbody > tr:last-child > td {
  border-bottom-width: 0;
}
</style>
